<template>
  <div class="content">
    <div id="container"></div>

    <!--  这里是 头部 -->
    <div class="head">
      <!-- <p class="headl">数据展示大屏</p> -->
      <h1>智能化管理平台</h1>
      <div class="boxtime">
        <!-- <div class="showTime2">时间: 2021.04.25</div> -->
        <div class="showTime">时间: 2021.04.25</div>
      </div>
    </div>
    
    <!--  这里是左边 -->
    <div class="leftBox">
      <div class="boxleft1">
        <div class="tou" style=" color: #fff;">
          到访客户统计分析
        </div>
        <optionS style=" width: 100%; height: 100%"></optionS>
        <!-- <div class="panel-footer"></div> -->
      </div>
      <div class="boxleft1">
        <div class="tou" style="color: #fff">设备统计分析</div>
        <optionS3 style="width: 100%; height: 100%"></optionS3>

        <div class="panel-footer"></div>
      </div>

      <div class="boxleft1">
        <div class="tou" style="color: #fff">设备连接异常分析</div>
        <optionS2 style="width: 100%; height: 100%"></optionS2>

        <div class="panel-footer"></div>
      </div>
      <!-- <div class="boxleft1 left3" style="width: 100%; height: 45%"> -->
      <div class="boxleft1" style="">
        <div class="tou" style="color: #fff; margin-bottom: 10px">
          工位数据分析  / TOP 10
        </div>
        <!-- <optionS4 style="width: 100%; height: 100%"></optionS4> -->
        <dv-scroll-board
          :config="configleft"
          style="width: 100%; height: 80%; opacity: 0.5"
        />

        <div class="panel-footer"></div>
      </div>
    </div>

    <!--  这里是右边 -->
    <div class="rightBox">
      <div class="boxright1">
        <h3  class="touCopyright"  style="color: #fff; text-align: left; margin-bottom: 10px">
          <!-- <h3  class="tou"  style="color: #fff; text-align: left; margin-bottom: 10px"> -->
          实时温度/湿度/空气质量分析
        </h3>
        <!--  height  92 -->
        <dv-scroll-board
          :config="config2"
          style="width: 100%; height: 95%; opacity: 0.5; margin-bottom: 10px"
          ref="scrollBoard"
        />
        <!-- <div id="myChart5" style="width: 100%; height: 100%"></div> -->
        <!-- <div class="panel-footer"></div>     -->
      </div>

      <!-- <div class="boxright1">
        <h2>我是湿度/空气质量</h2>
        <div id="myChart6" style="width: 100%; height: 100%"></div>
        <div class="panel-footer"></div>
      </div> -->


      <!-- border: 1px solid #ccc -->
      <div class="boxright2">
       <!-- <video id="video" style="width: 100%;height: 100%;" class="video-js vjs-default-skin" preload="auto">
        <source src="http://ivi.bupt.edu.cn/hls/chchd.m3u8" type="application/x-mpegURL">
        
        </video> -->
      <video id="my-video" style="width:300px;height:150px" class="video-js vjs-default-skin" muted controls preload="auto">
    <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL">
      </video>

      </div>
    </div>


    

    <div class="centerBox2" style="color: #fff; margin-bottom: 10px">
       3D展示工位
       <br>
       <br>
       <br>
       <br>
       <br>
       <div style="display:flex">
         <div style="width:35%"></div>
          <div style="width:50%;">
            <br>
            <br>
            <br>
            
            <div><span class="spanstyle" style="color:white;border:1px solid white;border:'1px solid white';background: 'rgba(0,0,0,.5)'" v-show="show">工位编码:{{parentname}}</span></div>
            <button @click="checkVideo()">点击切换到CCTV3</button>
          </div>
       <div></div>
       </div>
       
     
      
    </div>
   
    <!--  这里是中间 -->
    <div class="centerBox">
      <!-- <div class="biaoge"> -->
      <div class="touCopy" style="color: #fff; margin-bottom: 10px">
        门禁数据分析
      </div>
      <dv-scroll-board
        :config="config"
        style="width: 100%; height: 85%; opacity: 0.5"
        ref="menjinRef"
      />
      <!-- </div> -->
    </div>

    

  </div>
</template>



<script>
import { shishi, menjin, paiming,shipingjiankong } from "../api/demo.js";
import {addEventListener, attempt} from "./index"
//  echarts 图表   封装子组件  导入
import optionS from "./echarts/options.vue";
import optionS2 from "./echarts/options2.vue";
import optionS3 from "./echarts/options3.vue";
import optionS4 from "./echarts/options4.vue";
import optionS5 from "./echarts/options5.vue";
//  导入子组件
import vuePlayer from "./video.vue";
// video视频组件
import videojs from 'video.js'
import 'videojs-contrib-hls'
import "@videojs/http-streaming"


// 时间
import "./times.js";
// 导入布局的  js文件
import "./flexible.js";
// import { View } from "./index";

      


let view;
export default {
  // 注册子组件
  components: {
    // 视频播放
    vuePlayer,
    // echarts 第一个组件
    optionS,
    optionS2,
    optionS3,
    optionS4,
    optionS5,
  },
  data() {
    return {
      player: null,  //video参数
      ddd: false,
      //  这里是 门禁  的总数据  一直循环追加
      arrdata2: [],
      arr5: [],
      show: false,
      shuju:'',
      cameraName: "",
      parentname: "",
      parentColor:{r:'',b:'',g:''},
        
      configleft: {
        // air 空气    humidity湿度  temperature 温度
        // header: ["温度", "湿度", "空气"],
        header: ["工位名称/数量"],
        data: [
          ["111"],
          ["222"],
          ["333"],
          ["444"],
          ["555"],
          ["666"],
          ["777"],
          ["888"],
          ["999"],
          ["101010"],
        ],
        index: true,
        columnWidth: [50],
        align: "center",
        carousel: "single",
        // carousel: "page",
        rowNum: 5,
      },

      config: {
        header: ["列1", "列2", "列3", "列4"],
        data: [
          ["行1列1", "行1列2", "行1列3", "行1列3"],
          ["行2列1", "行2列2", "行2列3", "行1列3"],
          ["行3列1", "行3列2", "行3列3", "行1列3"],
        ],
        index: true,
        columnWidth: [50],
        align: ["center"],
        carousel: "page",
      },
      config2: {
        // air 空气    humidity湿度  temperature 温度
        // header: ["温度", "湿度", "空气"],
        header: [
          '<span style="color:#088bbf;font-weight:bolder;">湿度</span>', 
          '<span style="color:#088bbf;font-weight:bolder;">温度</span>', 
          '<span style="color:#088bbf;font-weight:bolder;">空气</span>'
        ],
        indexHeader: '<span style="color:#088bbf;">#</span>',
        headerBGC: '#1d365b',
        oddRowBGC: '#1d365b',
        data: [
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
        ],
        index: true,
        columnWidth: [50],
        align: ["center"],
        carousel: "single",
        // carousel: "page",
        rowNum: 10,
      },
      //  右边湿度/ 空气的  数据
      config3: {
        header: ["湿度", "温度", "PM2.5"],
        data: [
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
          ["22.05", "32.06", "52.36"],
          ["23.25", "33.01", "50.57"],
          ["22.05", "32.06", "52.36"],
        ],
        carousel: "single", // 一行一行滚动
        index: true, // 展示索引
      },
    };
  },
  mounted() {
    let _that = this;
        setTimeout(() => {
          _that.getVideo();
        }, 300);


    // this.init()  //视频的方法
    // console.log(document.getElementById("#dialog"))
    // console.log(this.$refs.qqq,'123412341234213');
    // this.$refs.qqq.innerHTML = `<object type='text/html' data='http://localhost:8084/cn/demo.html?ip=192.168.1.64&name=admin&password=wnkj2019&port=80' width='100%' height='100%'></object>`;

  //  console.log("那边传过来的数据",attempt())
    const { View } = require("./index");
    view = new View("#container", this);
    // 实时温度/湿度/空气质量分析
    this.shishidata();
    // // 门禁数据  接口
    // this.menjindata();
    // //  排名接口
    // this.paimingdata();
  },
  methods: {
//         videojs('my-video', {
//     bigPlayButton: false,
//     textTrackDisplay: false,
//     posterImage: true,
//     errorDisplay: false,
//     controlBar: true
// }, function () {
//     this.play()
// })
        getVideo() {
	   videojs(
	       "my-video",
	       {
	           bigPlayButton: false,
	           textTrackDisplay: false,
	           posterImage: true,
	           errorDisplay: false,
	           controlBar: true
	       },
	       function() {
	           this.play();
	       }
	   );
	},  
        checkVideo() {
    var myPlayer = videojs("my-video");
    myPlayer.src([
        {
            type: "application/x-mpegURL",
            src: "http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8" //CCTV3频道
        }
    ]);
    myPlayer.play();
},


        // 视频的方法
      //   init() {
      //   // 播放器初始化
      //   this.$nextTick(() => {
      //     this.player = videojs('video' , {
      //       bigPlayButton: false,
      //       textTrackDisplay: false,
      //       posterImage: true,
      //       errorDisplay: false,
      //       controlBar: false,
      //       muted: true //静音模式 、、 解决首次页面加载播放。
      //     }, function () {
      //       this.play() // 自动播放
      //     })
      //   })
      // },
  
    // top 10 排名  接口
    async paimingdata() {
      const { data: res } = await paiming();
      console.log("获取排名接口",res)
     if (res.code == 200) {
        // console.log(res.result,'排名请求成功');
        var arr = res.result;
        var arr2 = []; // 处理后的数组数据
        arr.map((e, i) => {
          return (arr2[i] = [e.num,e.work_name]);
        });
        // console.log("数据有0",arr2);
        this.configleft = {
          header: ["工位","任务"],
          data: arr2,
          index: true,
          columnWidth: [50],
          align: "center",
          carousel: "single",
          rowNum: 5,
        };
      }
  
    },
    close() {
      this.show = false;
    },
    shishidata() {
      var that = this;
      var t = null;
      t = setTimeout(time, 2000);
      async function time() {    
        const { data: res } = await shishi();
        console.log("实时温度的接口",res)
        if (res.code == 200) {
          var arr = res.result;
          var arr2 = Object.values(arr); //对象转化为数组
          // console.log(arr, "实时空气温度  数据=====================");
          //var arr5 = new Array();
          if (that.arr5.length < 10) {
            that.arr5.push(arr2);
          } else {
            that.arr5.shift();
            that.arr5.push(arr2);
          }
          //  一条一条的追加数据
          // that.$refs["scrollBoard"].updateRows(that.arr5);
          that.config2 = {
            header: ["温度", "湿度", "空气"],
            data: that.arr5,
            index: true,
            columnWidth: [50],
            align: ["center"],
            carousel: "single",
            rowNum: 7,
          };
          // console.log(that.arr5.length, "长度");
          // console.log(that.arr5, "555");
        }
        t = setTimeout(time, 2000);
      }
    },

    menjindata() {
      var that = this;
      var t = null;
      t = setTimeout(time, 2000);
      async function time() {
        const { data: res } = await menjin();
        console.log("门禁接口的数据",res)
        // if (res.code == 200) {
        //   var arr = res.result;
        //   // console.log(res, "这里是门禁999999");
        //   var arr = res.result;
        //   var obj2 = arr[0];
        //   //  得到 滚动条头部 数组的属性
        //   var keys = Object.keys(obj2);
        //   // console.log(keys, "对象的属性数组"); // year 年   location 位置    history历史   day 天   位置  历史 年  日

        //   var arrs = [];
        //   // var arrdata2 = [];  // 总的数组条数  在这里声明 总数组  第二次请求走到这里会被清空
        //   arr.forEach((obj, i) => {
        //     var arrr = [];
        //     arrr.push(obj.location);
        //     arrr.push(obj.history);
        //     arrr.push(obj.year);
        //     arrr.push(obj.day);
        //     arrs[i] = arrr;
        //   });
        //   // console.log(arrs,'99999999');
        //   //  这里追加的数据  只追加了一次  为什么都没有成功
        //   // that.arrdata2.push(...arrs); // 这才是正确的写法

        //   // console.log(that.arrdata2, "追加的数据9988");
        //   // 这个是 处理后的数组
        //   // console.log(arrs, "十二条数据的数组");

        //   //  12条 12条 的追加数据
        //   // that.$refs["menjinRef"].updateRows(that.arrdata2,7);   // 这样更新数据

        //   //  这里的配置是  config
        //   that.config = {
        //     // header: keys,
        //     header: [
        //       '<span style="color:#088bbf;font-weight:bolder;">所在位置</span>', 
        //       '<span style="color:#088bbf;font-weight:bolder;">历史累计</span>', 
        //       '<span style="color:#088bbf;font-weight:bolder;">本年累计</span>', 
        //       '<span style="color:#088bbf;font-weight:bolder;">本日累计</span>'
        //     ],
        //     indexHeader: '<span style="color:#088bbf;">#</span>',
        //     headerBGC: '#1d365b',
        //     oddRowBGC: '#1d365b',
        //     data: [
        //       ["全部", 271, 270, 3],
        //       ["五楼办公室1", 220, 200, 0],
        //       ["五楼办公室2", 220, 200, 0],
        //       ["五楼办公室3", 220, 200, 0],
        //       ["五楼办公室4", 220, 200, 0],
        //       ["五楼办公室5", 220, 200, 0],
        //       ["五楼办公室6", 220, 200, 0],
        //       ["五楼消防门禁", 220, 203, 0],
        //       ["五楼机房门禁", 210, 205, 0],
        //       ["五楼大门", 200, 100, 3]
        //     ], // 这里用的数据就是 vue  实例上的
        //     // data: arrs, // 这里用的数据就是 vue  实例上的
        //     index: true,
        //     columnWidth: [50],  
        //     align: "center",
        //     // carousel: "single",
        //     carousel: "page",
        //     rowNum: 6,
        //   };
        // }
        that.config = {
            // header: keys,
            header: [
              '<span style="color:#088bbf;font-weight:bolder;">所在位置</span>', 
              '<span style="color:#088bbf;font-weight:bolder;">历史累计</span>', 
              '<span style="color:#088bbf;font-weight:bolder;">本年累计</span>', 
              '<span style="color:#088bbf;font-weight:bolder;">本日累计</span>'
            ],
            indexHeader: '<span style="color:#088bbf;">#</span>',
            headerBGC: '#1d365b',
            oddRowBGC: '#1d365b',
            data: [
              ["全部", 271, 270, 3],
              ["五楼办公室1", 220, 200, 0],
              ["五楼办公室2", 220, 200, 0],
              ["五楼办公室3", 220, 200, 0],
              ["五楼办公室4", 220, 200, 0],
              ["五楼办公室5", 220, 200, 0],
              ["五楼办公室6", 220, 200, 0],
              ["五楼消防门禁", 220, 203, 0],
              ["五楼机房门禁", 210, 205, 0],
              ["五楼大门", 200, 100, 3]
            ], // 这里用的数据就是 vue  实例上的
            // data: arrs, // 这里用的数据就是 vue  实例上的
            index: true,
            columnWidth: [50],  
            align: "center",
            // carousel: "single",
            carousel: "page",
            rowNum: 6,
          }
        t = setTimeout(time, 8000);
      }
    },
  },
  //  beforeDestroy() {
  //     if (this.player != null) {
  //       this.player.dispose() // dispose()会直接删除Dom元素
  //     }
  //   }
};
</script>



<style lang="scss" scoped>
/* // /deep/ .ceil {
//   text-align: center;
// } */
// .spanstyle {
//                 color: 'blaek';
//                 border-radius: '2px';
//                 border: '1px solid white';
//                 font-size: '1px';
//                 background: 'rgba(0,0,0,1)';

// }
.tou {
  /* box-sizing:border-box; */
  border-left: 3px solid blue;
  background: linear-gradient(to right, rgba(57, 101, 232, 1),   
    rgba(1,1,0,0.0) 85%);
  margin-top: 10px;
  font-size: 0.15rem;
  text-align: left;
  /* text-align: ; */
  line-height: 25px;
  height:25px;
  padding-left: 15px;
  /* background-color: rgb(0, 144, 233); */
  opacity: 0.7;

  &::before {
      position: absolute;
      /* top: 0; */
      left: 0;
      content: "";
      color: #fff;
      width: 15px;
      height: 25px;
      border-left: 2px solid #02a6b5;
      /* border-top: 2px solid #02a6b5; */
    }

}

.head {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0.75rem;
  line-height: 0.75rem;
  /* opacity: 0.3; */
  /* background-color: pink; */
  background: url("../images/head_bg.png");
  p {
    position: absolute;
    top: 0;
    left: 50px;
    color: #fff;
    font-size: 0.29rem;
  }
  h1 {
    text-align: center;
    font-size: 0.6rem;
    /* color: #fff; */
    color: #fff;
  }
  .showTime {
    position: absolute;
    top: 0.2rem;
    right: 0.25rem;
    color: honeydew;
    font-size: 0.25rem;
    height: 50%;
    line-height: 0.4rem;
  }
}

.centerBox2 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 55%;
  height: 25px;
  font-size: 0.17rem;
  text-align: left;
  line-height: 25px;
  padding-left: 15px;
  /* background-color: rgb(0, 144, 233); */
  opacity: 0.6;
  /* margin: 0 auto; */
  box-shadow: border-box;

  /* box-sizing:border-box; */
  border-left: 3px solid blue;
  background: linear-gradient(to right, rgba(57, 101, 232, 1),   
    rgba(1,1,0,0.0) 85%);
  margin-top: 10px;
  font-size: 0.15rem;
  text-align: left;
  /* text-align: ; */
  line-height: 25px;
  height:25px;
  padding-left: 15px;
  /* background-color: rgb(0, 144, 233); */
  opacity: 0.7;

  &::before {
      position: absolute;
      top: 0;
      left: -3px;
      content: "";
      color: #fff;
      width: 15px;
      height: 25px;
      border-left: 2px solid #02a6b5;
      /* border-top: 2px solid #02a6b5; */
    }
}

.centerBox {
  .touCopy {
    /* box-sizing:border-box; */
  border-left: 3px solid blue;
  background: linear-gradient(to right, rgba(57, 101, 232, 1),   
    rgba(1,1,0,0.0) 85%);
  margin-top: 10px;
  font-size: 0.15rem;
  text-align: left;
  /* text-align: ; */
  line-height: 25px;
  height:25px;
  padding-left: 15px;
  /* background-color: rgb(0, 144, 233); */
  opacity: 0.7;
  position: relative;

  &::before {
      position: absolute;
      top: 0;
      left: -3px;
      content: "";
      color: #fff;
      width: 15px;
      height: 25px;
      border-left: 2px solid #02a6b5;
      /* border-top: 2px solid #02a6b5; */
    }

  }

  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 55%;
  height: 30%;
  /* line-height: 30%;
  background-color: pink;
  border: 1px solid red; */
  text-align: center;
  margin: 0 auto;
  box-shadow: border-box;
     /* padding: 20px;
     dv-scroll-board {
         width: 80%;
         height: 80%;
     } */
   /* padding-left: 100px; */
  /* //   .boxXia {
  //     width: 80%;
  //     height: 230px;
  //     background-color: yellow;
  //     text-align: center;
  //   } */

  /* //   .biaoge {
  //     width: 150%;
  //     height: 250px;
  //     background-color: pink;
  //     margin-top: 50px; */

  /* //     table {
  //       width: 100%;
  //       text-align: center;
  //     }
  //     width: 35.375rem;
  //     .eee {
  //       background-color: #133977;
  //     }
  //     .qqq {
  //       color: #01f3fc;
  //       font-size: 0.2875rem;
  //     }
  //     // text-align: center;
  //     // margin: auto;
  //     // background-color: #15428c;
  //     position: absolute;
  //     top: 50%;
  //     left: 50%;
  //     transform: translate(-50%, -45%);
  //     color: #fff;
  //     font-size: 0.25rem;
  //     td {
  //       width: 40px;
  //       padding: 10px;
  //       text-align: center;
  //       // border: 1px solid pink;
  //     }
  //   } */
}

/* //  左边最大的盒子 */
.leftBox {
  /* background-color: rgb(4, 11, 29); */
  position: absolute;
  top: 1rem;
  left: 0.125rem;
  width: 20%;
  height: 90%;
  box-sizing: border-box;
  // background-color: pink;
  //   border: 1px solid red;
  text-align: center;
  padding: 10px;
  padding-top: 0;
  //   overflow: hidden;
  &:nth-child(3) {
    // height: 48%;
    // background-color: pink;
  }
  .boxleft1 {
    position: relative;
    width: 100%;
    height: 24%;
    margin: 0 0 10px 0;
    /* background-color: pink; */
    /* border: 1px solid rgba(255, 255, 255, 0.17); */
    /* &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      color: #fff;
      width: 15px;
      height: 15px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    } */
    /* &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      // color: #fff;
      width: 15px;
      height: 15px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    } */
    /* 这个盒子定位在底部 没有高度 */
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      /* &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        color: #fff;
        width: 15px;
        height: 15px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      } */
      /* &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        color: #fff;
        width: 15px;
        height: 15px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      } */
    }
  }
}

.rightBox {
  position: absolute;
  top: 1rem;
  right: 0.125rem;
  width: 16%;
  height: 78%;
  /* background-color: pink;
  border: 1px solid red; */
  text-align: center;
  padding: 10px;
  padding-top: 0;
  .boxright1 {

    .touCopyright {
        /* box-sizing:border-box; */
        border-left: 3px solid blue;
        background: linear-gradient(to right, rgba(57, 101, 232, 1),   
          rgba(1,1,0,0.0) 85%);
        margin-top: 10px;
        font-size: 0.15rem;
        text-align: left;
        /* text-align: ; */
        line-height: 25px;
        height:25px;
        padding-left: 15px;
        /* background-color: rgb(0, 144, 233); */
        opacity: 0.7;

        &::before {
            position: absolute;
            /* top: 10px; */
            left: 0;
            content: "";
            color: #fff;
            width: 15px;
            height: 25px;
            border-left: 2px solid #02a6b5;
            /* border-top: 2px solid #02a6b5; */
          }
    }


    position: relative;
    width: 100%;
    height: 80%;
    /* margin: 0 0 10px 0; */
    /* background-color: pink;
    border: 1px solid green; */
    /* border: 1px solid rgba(255, 255, 255, 0.17); */

    /* &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      color: #fff;
      width: 15px;
      height: 15px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      color: #fff;
      width: 15px;
      height: 15px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
    } */
    /* 这个盒子定位在底部 没有高度 */
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        // color: #fff;
        width: 15px;
        height: 15px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
      }
    }
  }
  .boxright2 {
    margin-left: -30%;
    width: 130%;
    padding-top: 5vh;
  }
}
.content {
  background-color: red;
}

// 下面样式 是模板样式  不用动 ===============================
.home {
  width: 100vw;
  height: 100vh;
  // background-color: red;
}

#dialog {
  padding-top: 50px;
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#close {
  img {
    width: 25px;
  };
  ._video-ref {
    height: 500px;
  }
  /* margin: 10px; */
  width: 100%;
  height: 25px;
  position: absolute;
  top: 15px;
  /* left: 10px; */
  /* padding: 5px; */
  box-sizing: border-box;
  font-size: 14px;
  /* background: steelblue; */
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// #panel {
//   background: rgba(0, 0, 0, 0.5);
//   color: white;
//   font-size: 12px;
//   width: 300px;
//   height: 200px;
//   z-index: 10000;
//   position: absolute;
//   left: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   margin: auto;
//   margin-right: 10%;
//   padding: 10px;
// }
// #close {
//   position: absolute;
//   right: -5px;
//   top: -15px;
//   color: white;
//   z-index: 10000;
//   font-size: 20px;
//   font-weight: bold;
//   cursor: pointer;
// }
* {
  margin: 0;
  padding: 0;
}

// ========================================== 下面是他的样式 不用管

// ul{
//   background: white;
// }
// li{
//   list-style: none;
//   font-size: 12px;
//   padding: 5px;
//   cursor: pointer;
//   /* color: white; */
// }
// li:hover{
//   background: black;
//   color: white;
// }
// #container {
//   width: 100vw;
//   height: 100vh;
//   overflow: hidden;
// }
// #search{
//   position: fixed;
//   right: 100px;
//   top: 10px;
//   z-index: 10000;
// }

// ======================================================================
// #close {
//   position: absolute;
//   right: 10px;
//   top: -5px;
//   font-size: 20px;
//   cursor: pointer;
// }
// #dialog {
//   width: 60vw;
//   height: 80vh;
//   background: pink;
//   position: fixed;
//   left: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   z-index: 10000;
//   margin: auto;
// }
ul {
  background: white;
}
li {
  list-style: none;
  font-size: 12px;
  padding: 5px;
  cursor: pointer;
  /* color: white; */
}
li:hover {
  background: black;
  color: white;
}
#container {
  background-image: url(/bg2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#search {
  position: fixed;
  right: 100px;
  top: 10px;
  z-index: 10000;
}
</style>
海南医学院实验室管理平台(数据大屏也是)
泛美的logo
